<template>
  <!-- subjects.vue 专用组件 -->
  <div class='container'>
    <el-dialog
      :title="titleInfo.text+titleInfo.pageTitle"
      :visible.sync="dialogFormVisible"
      center
      width="30%"
    >
      <el-form
        :rules="ruleInline"
        ref="dataForm"
        :model="formBase"
        label-position="left"
        label-width="150px"
        style="width: 80%; margin-left:10px;"
      >
        <el-form-item
          label="学科名称"
          prop="subjectName"
        >
          <el-input v-model="formBase.subjectName"></el-input>
        </el-form-item>

        <el-form-item label="是否显示">
          <el-switch
            v-model="formBase.isFrontDisplay"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="btnCancel">{{$t('table.cancel')}}</el-button>
        <el-button
          type="primary"
          @click="createData"
        >{{$t('table.confirm')}}</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import { update, add } from '@/api/hmmm/subjects'
export default {
  props: {
    titleInfo: {
      type: Object,
      required: true
    },
    formBase: {
      type: Object,
      required: true
    },
  },
  data () {
    return {
      dialogFormVisible: false,
      ruleInline: {
        subjectName: [
          { required: true, message: '学科名称不能为空', trigger: 'blur' }
        ],
      },
    }
  },
  methods: {
    // 弹层显示
    btnOk () {
      this.dialogFormVisible = true
    },
    // 弹层隐藏
    btnCancel () {
      this.dialogFormVisible = false
    },
    // 表单提交
    createData () {

      this.$refs.dataForm.validate(async valid => {
        if (valid) {
          this.btnCancel()
          const data = {
            ...this.formBase
          }
          if (this.formBase.id) {
            await update(data).then(() => {
              this.$emit('newDataes', this.formBase)
            })
          } else {
            await add(this.formBase).then(() => {
              this.$emit('newDataes', this.formBase)
            })
          }
        } else {
          this.$message.error('*号为必填项!')
        }
      })
    }
  }
}
</script>

<style scoped lang='less'></style>
